<template>
  <div>
    <van-nav-bar title="消息中心" left-arrow @click-left="$router.push('/home')"/>
    <!-- 暂无消息 -->

    <van-tabs v-model="active">
      <van-tab title="全部消息" :dot="UnRead.length !==0 ? true:false"
        ><Messageconten :messageArr="mscontent"
      /></van-tab>
       <van-tab title="系统消息" :dot="systemUnRead.length !==0 ? true:false"><Messageconten :messageArr="systemInfo"/></van-tab>
      <van-tab title="个人消息" :dot="userUnRead.length !==0 ? true:false"><Messageconten :messageArr="userInfo"/></van-tab>
    </van-tabs>
    <div class="img" v-show="mscontent.length == 0">
      <img src="../assets/images/暂无消息.png" width="200px" alt="" />
      <div>暂无消息</div>
    </div>
  </div>
</template>

<script>
import Messageconten from "../components/Messageconten";
import { message } from "../request/api";
export default {
  data() {
    return {
      active: "",
    //   全部消息
      mscontent: [],
    //   系统消息
      systemInfo:[],
    //   个人消息
      userInfo:[],
      // 判断红点的状态
      UnRead:[],
      systemUnRead:[],
      userUnRead:[]

    };
  },
  created() {
    message({}).then((res) => {
    //   console.log(res);
    if(res.errCode==0){
        this.mscontent = res.data.records;
    //   console.log(this.mscontent);
    // 系统消息
      this.systemInfo=this.mscontent.filter((item)=>{
          return item.type==1
      })
      // 个人消息
        this.userInfo=this.mscontent.filter((item)=>{
          return item.type !==1
      })
    //   console.log(this.userInfo);
    // 全部消息
      this.UnRead = this.mscontent.filter((item)=>{
        return item.isReader !==0
      })

      // 系统消息
      this.systemUnRead = this.systemInfo.filter((item)=>{
        return item.isReader !==0
      })
      // 个人消息
      this.userUnRead = this.userInfo.filter((item)=>{
        return item.isReader !==0
      })
    }
     
    });
  },
  components: {
    Messageconten,
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
}
/deep/.van-tabs {
  .van-tabs__line {
    background-color: #fad157;
  }
  .van-tab--active {
    color: #003399;
  }
  .van-tab {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
}

.img {
  width: 201px;
  height: 181px;
  margin: 150px auto;
  text-align: center;
  color: #ccc;
}
</style>